<template>
    <div class="credit">
        <van-nav-bar :title="msg==1?'水机签约':'申请代理'" left-arrow @click-left="onClickLeft" />
        <div class="credit_list">
            <div class="credit_item" v-for="item, index in creditList" :key="index">
                <div class="credit_info">
                    <div class="credit_name"  :style="{ 'color': item.text_color }">{{ item.name }}</div>
                    <div class="credit_money">{{ item.quota }}</div>
                </div>
                <div class="line"></div>
                <div class="container">
                    <div class="credit_btn" v-if="item.status==-1" @click="handleCredit(item.id)">{{ item.status_desc }}</div>
                    <div class="credit_btn" v-if="item.status==0" style="background-color: #FFFBE6; color: #FAAD14;border: 1px solid #FFF1B8;">{{ item.status_desc }}</div>
                    <div class="credit_btn" v-if="item.status==1"   @click="handleSign(item.id)" style="background-color: #FFF2E6; color: #FF7017;border: 1px solid #FFD0B8;">{{ item.status_desc }}</div>
                    <div class="credit_btn" v-if="item.status==2"   @click="handleCredit(item.id)" style="background-color: #FFF2E6; color: #FF7017;border: 1px solid #FFD0B8;">{{ item.status_desc }}</div>
                    <div class="credit_btn" v-if="item.status==10"  @click="handleSign(item.id)" style="background-color: #F6FFED; color: #52C41A;border: 1px solid #D9F7BE;">{{ item.status_desc }}</div>
                    <div class="credit_btn" v-if="item.status==11"  style="background-color: #F6FFED; color: #52C41A;border: 1px solid #D9F7BE;">{{ item.status_desc }}</div>
                </div>
            </div>
        </div>
        <van-popup v-model="agreementShow" position="bottom" :style="{ height: '80%' }" round closeable>
			<!-- <div class="clones" @click="agreementShow=false">取消</div> -->
			<div class="popup_box">
				<div class="apply_tip">{{ title }}</div>
				<div class="agreement" v-html="agreement"></div>
				<div class="detail_btn">
					<div @click="agreementShow=false">不同意</div>
					<div @click="getSign">同意</div>
				</div>
			</div>

		</van-popup>
    </div>
</template>
<script>
export default {
    data() {
        return {
            creditList: [],
            ids:this.$route.query.id,
            agreementShow:false,
            agreement: '',
            msg:this.$route.query.msg,
            title:'',
            config_id:""
        }
    },
    created() {
        // this.ids=
        this.getShopDetail()
    },
    methods: {
        getShopDetail() {
            let params={
                id:this.ids,
                level:this.msg==1?20:this.msg
            }
			this.$http.get(`/agreement/configs`,{params})
				.then(res => {
                    this.creditList=res.data
				})
		},
        onClickLeft() {
            this.$router.go(-1)
        },
        //立即申请
        handleCredit(id){
            this.agreementShow=true
            this.config_id=id
            this.agreement=this.creditList.find(item=>item.id==id).content.replace(/\n/g, '<br>')
            this.title=this.creditList.find(item=>item.id==id).name
            // this.$router.push({path:'/creditSign',query:{store_id:this.ids,ids:id}})
        },
        //签约
        handleSign(id){
            // 
            this.$http.post(`/agreement/seal_url`, 
                {
                    id:this.ids,
                    config_id:id,
                    level:this.msg==1?20:this.msg,
                    redirect_url:location.href.split('#')[0]+'#/level_credit?msg='+this.msg+'&id='+this.ids
                }
            ).then(res => {
                window.location.href=res.data.board_url     
                // this.getShopDetail()
             })
        },
        getSign(){
            this.$http.post(`/agreement/apply`, 
                {
                    id:this.ids,
                    config_id:this.config_id,
                    level:this.msg==1?20:this.msg
                }
            ).then(res => {
                this.agreementShow=false
                this.config_id=''
                this.getShopDetail()
             })
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .van-icon {
    color: #333333;
}

::v-deep .van-nav-bar__title {
    color: #333333;
}

::v-deep .van-nav-bar__arrow {
    font-size: 20px;
}

::v-deep .van-nav-bar__text {
    color: #333333;
}

.credit {
    padding-top: 46rpx;
    background: #F4F4F4;
    min-height: 100vh;

    .credit_list {
        .credit_item {
            width: 95%;
            height: 2.26rem;
            background-color: #fff;
            margin: 0 auto;
            border-radius: .24rem;
            margin-top: .2rem;
            padding: .32rem;
            box-sizing: border-box;

            .credit_info {
                display: flex;
                justify-content: space-between;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                line-height: .44rem;
                text-align: left;
                font-style: normal;
                .credit_name {
                    font-size: .32rem;
                    // color: #666666;

                }

                .credit_money {
                    font-size: .32rem;
                    color: #1D69E4;
                }
            }

            .line {
                width: 100%;
                height: .01rem;
                background-color: #E3E3E3;
                margin: .3rem 0;
            }

            .container {
                display: flex;
                justify-content: flex-end;

                /* 将内容对齐到右边 */
                .credit_btn {
                    border-radius: .3rem;
                    border: 1px solid #1D69E4;
                    display: inline-block;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: .28rem;
                    color: #1D69E4;
                    // line-height: .4rem;
                    text-align: left;
                    font-style: normal;
                    padding: .1rem .2rem;
                }
            }

        }
    }
}
.popup_box {
	position: relative;

	.apply_tip {
		width: 100%;
		padding-top: .2rem;
		text-align: center;
		margin: 0 auto;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: .32rem;
		color: #000000;
		border-bottom: 1px solid #F2F4F5;
		padding-bottom: .2rem;
	}

	.agreement {
		width: 95%;
		margin: 0 auto;
		font-size: .28rem;
		padding-top: .3rem;
		padding-bottom: .5rem;
		line-height: .5rem;
		margin-bottom: 1.2rem;
	}

	.detail_btn {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-around;
		padding-bottom: .5rem;
		padding-top: .3rem;
		div:first-child {
			width: 40%;
			height: .88rem;
			line-height: .88rem;
			text-align: center;
			border-radius: .44rem;
			border: 1px solid #1D69E4;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: .32rem;
			color: #1D69E4;
			font-style: normal;
		}

		div:last-child {
			width: 40%;
			height: .88rem;
			line-height: .88rem;
			text-align: center;
			border-radius: .44rem;
			border: 1px solid #1D69E4;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: .32rem;
			color: #fff;
			font-style: normal;
			background: linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%);

		}
	}
}
</style>